<template>
    <div :class="['sidebar', { 'collapsed': isCollapsed }]">
        <div class="sidebar-header">
            <div v-if="!isCollapsed" class="username">Claude</div>
            <el-icon class="el-icon" @click="toggleSidebar">
                <Fold v-if="!isCollapsed" />
                <Expand v-else />
            </el-icon>

        </div>
        <div class="sidebar-menu">
            <ul>
                <li @click="navigateToHome">
                    <span v-if="!isCollapsed">Home</span>
                </li>
                <li @click="navigateToSettings">
                    <span v-if="!isCollapsed">Settings</span>
                </li>
                <li @click="navigateToMessages">
                    <span v-if="!isCollapsed">Messages</span>
                </li>
            </ul>
        </div>
        <div class="sidebar-footer">
            <button @click="logout">Logout</button>
        </div>
    </div>
</template>

<script lang="ts">
import { ref, computed } from "vue";
import { Fold, Expand } from "@element-plus/icons-vue";
import { useStore } from 'vuex';

export default {
    name: 'Sidebar',
    components: {
        Fold,
        Expand,
    },
    setup() {
        /*const isCollapsed = ref(false); // 默认菜单展开
        // 切换菜单收缩和展开的函数
        const toggleSidebar = () => {
            isCollapsed.value = !isCollapsed.value;
        };*/

        const store = useStore();
        // 获取 Vuex store 中的 isCollapsed 状态
        const isCollapsed = computed(() => store.getters.isCollapsed);
        
        // 切换 isCollapsed 状态
        const toggleSidebar = () => {
            store.dispatch('toggleSidebar');  // 通过 dispatch 调用 action
        };

        // 导航函数
        const navigateToHome = () => {
            console.log('Navigating to Home');
        };
        const navigateToSettings = () => {
            console.log('Navigating to Settings');
        };
        const navigateToMessages = () => {
            console.log('Navigating to Messages');
        };
        const logout = () => {
            console.log('Logging out');
        };

        // 返回模板中需要使用的变量和方法
        return {
            isCollapsed,
            toggleSidebar,
            navigateToHome,
            navigateToSettings,
            navigateToMessages,
            logout,
        };
    },
};
</script>

<style scoped>
.sidebar {
    width: 20vw;
    height: 100vh;
    background-color: #222;
    color: #fff;
    height: 100vh;
    display: flex;
    flex-direction: column;
    transition: width 0.3s ease;
}

.sidebar.collapsed {
    width: 100px;
    /* 收缩后的宽度 */
}

.sidebar-header {
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.el-icon {
    width: 15px;
    height: 15px;
}

.avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.username {
    font-size: 18px;
    font-weight: bold;
}

.sidebar-menu {
    flex-grow: 1;
    padding: 20px;
}

.sidebar-menu ul {
    list-style: none;
    padding: 0;
}

.sidebar-menu li {
    margin: 15px 0;
    cursor: pointer;
    font-size: 16px;
}

.sidebar-menu li:hover {
    background-color: #444;
    padding-left: 10px;
    transition: all 0.2s ease;
}

.sidebar-menu li span {
    display: inline-block;
}

.sidebar-footer {
    margin: auto;
    text-align: center;
    height: 45px;
}

.sidebar-footer button {
    background-color: #f5a623;
    border: none;
    padding: 8px 16px;
    color: white;
    cursor: pointer;
    font-size: 16px;
}

.sidebar-footer button:hover {
    background-color: #f39c12;
}
</style>
